import React, { useEffect, useState } from "react";

import styled from "styled-components";
import eventBus from "@/utils/eventBus";

import { ColorPicker } from "antd";
import type { ColorPickerProps, GetProp } from "antd";
import { message } from "antd";
import { CopyOutlined } from "@ant-design/icons";

import colorDataList from "./data";

import ColorDecimalConversion from "./component/ColorDecimalConversion";

export type ColorDataList = {
  name: string;
  color16: string;
  colorRgb: string;
};

type Color = GetProp<ColorPickerProps, "value">;
type Format = GetProp<ColorPickerProps, "format">;

// 组件-------------------------------------------------------------------------
const Container = styled.div`
  width: 59.27vw;
  min-height: 93vh;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
`;

// 颜色选择器
const ColorSelector = styled.div`
  width: 100%;
  padding: 0 15px;
  display: flex;
  align-items: center;
`;

const Title = styled.div`
  width: 100%;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0;
  padding: 0 10px;
`;

const ColorBox = styled.div`
  width: 59.27vw;
  border: 1px solid #ebccd1;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
`;

const Content = styled.div`
  width: 7.19vw;
  height: 18vh;
  margin: 5px 0;
`;

const ColorRegion = styled.div`
  width: 5.73vw;
  height: 10.18vh;
  margin: 5px 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;

  & .content-show {
    display: none;
  }

  &:hover .content-show {
    display: block;
  }
`;

const CopyButton = styled.div`
  width: 100%;
  font-size: 12px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
`;

const ColorText = styled.div`
  width: 100%;
  text-align: center;
`;

function ColorSchemeChart() {
  const [color, setColor] = useState<Color>("#1677ff");

  const [format, setFormat] = useState<Format>("hex");

  const [messageApi, contextHolder] = message.useMessage();

  useEffect(() => {
    const colorBoxes = document.querySelectorAll(".color-box");
    colorBoxes.forEach((colorBox) => {
      const bgColor = window.getComputedStyle(colorBox).backgroundColor;
      const colorShow = colorBox.querySelector(".content-show") as HTMLElement;

      // 判断背景颜色是否为暗色
      const isDark = isColorDark(bgColor);
      // 根据背景颜色设置字体颜色
      if (colorShow) {
        colorShow.style.color = isDark ? "#fff" : "#000";
      }
    });
  }, []);

  // 颜色值转字符串
  const colorValueString = React.useMemo<string>(() => {
    if (format === "hex") {
      return typeof color === "string" ? color : color.toHexString();
    } else if (format === "hsb") {
      return typeof color === "string" ? color : color.toHsbString();
    } else if (format === "rgb") {
      return typeof color === "string" ? color : color.toRgbString();
    }
    return "";
  }, [color, format]);

  // 判断颜色是否为暗色
  const isColorDark = (color: any) => {
    const rgb = color.match(/\d+/g);
    if (rgb) {
      const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
      return brightness < 128;
    }
  };

  // 复制文本逻辑
  function copyColorText(text: string) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          success();
        })
        .catch((error) => {
          error();
        });
    } else {
      document.execCommand("copy", false, text);
    }
  }

  // 复制成功
  const success = () => {
    messageApi.open({
      type: "success",
      content: "已复制到粘贴板",
    });
  };
  // 复制失败
  const error = () => {
    messageApi.open({
      type: "error",
      content: "复制失败",
    });
  };

  return (
    <Container>
      <div> {contextHolder}</div>
      <Title>颜色值转换</Title>
      <ColorDecimalConversion
        copyColorText={copyColorText}
        title="16进制转rgb"
      ></ColorDecimalConversion>
      <ColorDecimalConversion
        copyColorText={copyColorText}
        title="rgb转16进制"
      ></ColorDecimalConversion>

      <Title>颜色选择器</Title>
      <ColorSelector>
        <ColorPicker
          format={format}
          value={color}
          onChange={setColor}
          onFormatChange={setFormat}
        />
        <div
          style={{ display: "flex", cursor: "pointer" }}
          onClick={() => {
            copyColorText(colorValueString);
          }}
        >
          <div style={{ marginLeft: 10 }}>{colorValueString}</div>
          {/* 空格符 */}
          {"\u00A0"}
          <CopyOutlined />
        </div>
      </ColorSelector>

      <Title>颜色对照表</Title>
      <ColorBox>
        {colorDataList.map((item: ColorDataList) => {
          return (
            <Content key={item.name}>
              <ColorRegion
                className="color-box"
                style={{ backgroundColor: item.color16 }}
                onClick={() => {
                  copyColorText(item.color16);
                }}
              >
                <ColorText className="content-show">
                  {item.color16} <CopyOutlined />
                </ColorText>
              </ColorRegion>
              <ColorText>{item.name}</ColorText>
              <ColorText>rgb({item.colorRgb})</ColorText>
            </Content>
          );
        })}
      </ColorBox>
    </Container>
  );
}

export default ColorSchemeChart;
